<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-sm">
    <div class="container">
        <a class="navbar-brand text-info text-weight-bold" href="{% url 'blog:index' %}">主页</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#flaskNavContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="flaskNavContent">
            <ul class="navbar-nav mr-auto">
                {% if user.is_authenticated %}
                {% for category in nav_categories %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'blog:category_posts' category.name %}">{{ category.name }}</a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            <form class="form-inline my-2 my-lg-0" action="/search/">
                <input name="q" class="form-control mr-sm-2" type="search" placeholder="搜索文章..." aria-label="搜索">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav ml-auto">
                <!--下拉框-->
                {% if request.user.is_authenticated %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <!-- 小红点 -->
                        {% if unread_count %}
                        <svg viewBox="0 0 8 8"
                             width="8px"
                             height="8px">
                            <circle cx="4"
                                    cy="4"
                                    r="4"
                                    fill="#ff6b6b"
                            ></circle>
                        </svg>
                        {% endif %}
                        <img src="{{ user.profile.avatar.url }}" alt="个人头像" class="rounded" width="30" height="30">

                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <!--通知计数-->
                        <a class="dropdown-item text-muted" href="{% url 'notice:list' %}"><i class="fa fa-bell"
                                                                                              aria-hidden="true"></i> 通知
                            {% if unread_count %}
                            <span class="badge badge-danger">{{ unread_count }}</span>
                            {% endif %}
                        </a>
                        <a class="dropdown-item text-muted" href="{% url 'blog:create' %}">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            写文章</a>
                        <a class="dropdown-item text-muted" href="{% url 'account:profile' %}"><i class="fa fa-user"
                                                                                                  aria-hidden="true"></i>
                            我的主页</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-muted" href="{% url 'account:password_change' %}">更改密码</a>
                        <a class="dropdown-item text-muted" href="{% url 'account:logout' %}">
                            <i class="fa fa-power-off" aria-hidden="true"></i>
                            注销</a>
                    </div>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'account:login' %}">登录</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
